<template lang="">
  <div>
    <!-- <van-nav-bar
      title="UDD"
      left-arrow
      :fixed="true"
      :placeholder="true"
      @click-left="onClickLeft"
    /> -->
    <div class="page">
      <div class="mining-head">
        <div class="head-title">
          <!-- {{ t("totalAmount") }}：{{
            addChineseUnit(info.userTotalUKey) || "--"
          }} -->
          {{ t("totalAmount") }}：100{{ t("hundredMillion") }}
        </div>
        <div class="head-title">
          {{ t("currentOutput") }}：{{
            addChineseUnit(info.currentUKeySum) || "--"
          }}
        </div>
        <div class="head-title">
          {{ t("outputToday") }}：{{
            addChineseUnit(info.todayUKeySum) || "--"
          }}UKey
        </div>
      </div>
      <div class="blister-box">
        <div
          class="blister-body"
          v-for="item in randomList"
          :key="item.id"
          :style="`position: absolute;top: ${item.top}%;
              left: ${item.left}%;`"
          @click="receiveInFull"
        >
          <div class="blister-title">
            <span>UKey</span>
            <span>+{{ item.incomeNum }}</span>
          </div>
        </div>
      </div>
      <div class="mining-btn">
        <div class="btn-box">UKey {{ uddNum }}</div>
        <div class="btn-box" @click="isInvitationCode = true">
          {{ t("inviteFriends") }}
        </div>
      </div>
      <div class="rules-title">—— {{ t("miningRules") }} ——</div>
      <div class="node-mining">
        <span class="node-top">{{ t("nodalMining") }}</span>
        <span class="node-bottom">
          <div>{{ t("nodalMiningTip1") }}</div>
          <div>{{ t("nodalMiningTip2") }}</div>
          <div>{{ t("nodalMiningTip3") }}</div>
        </span>
      </div>
      <div class="recommend-mining">
        <span class="recommend-top">{{ t("recommendedMining") }}</span>
        <span class="recommend-center">{{ t("recommendedMiningTip1") }}</span>
        <span class="recommend-bottom">{{ t("recommendedMiningTip2") }}</span>
        <span class="recommend-bottom">{{ t("recommendedMiningTip3") }}</span>
      </div>
      <div class="rules-title">—— {{ t("rewardRecord") }} ——</div>
      <div class="reward-log">
        <div class="reward-list" v-for="item in awardRecorLists" :key="item">
          <span>{{ item.createTime }}</span>
          <span>+{{ item.incomeNum }}UKey</span>
        </div>
        <div
          v-if="awardRecorLists.length < awardRecorTotal"
          class="reward-more"
          @click="showMore"
        >
          <img
            style="width: 18px"
            src="@/static/down.png"
            mode="widthFix"
            alt=""
          />
          <span class="more-title">{{ t("viewMore") }}</span>
        </div>
        <div v-else class="reward-more" @click="showMore">
          -- {{ t("noMoreYet") }} --
        </div>
      </div>
    </div>
    <div>
      <van-overlay
        v-model:show="isInvitationCode"
        @click.stop="isInvitationCode = false"
      >
        <div class="invitation-box">
          <div class="cross"></div>
          <div class="vertical"></div>
          <div class="direct-body">
            <div class="body-tip">{{ t("myInvitationCode") }}</div>
            <div class="body-body">https://uk.api.aptoken.xyz?address={{ address }}</div>
            <div class="direct-foot" @click="copyLink">
              {{ t("copyInvitationLink") }}
            </div>
          </div>
        </div>
      </van-overlay>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import useClipboard from "vue-clipboard3";
import { showSuccessToast } from "vant";
import { useI18n } from "vue-i18n";
import App from "@/store/ethers.js";
import addChineseUnit from "@/libs/setNum";
import * as MiningApi from "@/api/mining";

const app = new App();
app.init();
const { t } = useI18n();
const { toClipboard } = useClipboard();

const isInvitationCode = ref(false);
const randomList = ref([]);
const info = ref({});
const pageNum = ref(1);
const pageSize = ref(5);
const awardRecorLists = reactive([]);
const awardRecorTotal = ref(0);
const uddNum = ref(0);
const address = ref(""); // 钱包地址

onMounted(() => {
  getMiningData();
  getAwardRecordData();
  uddNum.value = window.location.search.split("=")[1];
  getAddress();
});

const getAddress = async () => {
  address.value = await app.getWalletAddress();
};

// 随机获取气泡位置
const produceNum = () => {
  console.log(info.value.currentUKeySum, "length");
  let arr = [];
  for (let i = 0; i < info.value.blisterList?.length; i++) {
    let row = Math.floor(Math.random() * (70 - 1) + 1);
    let col = Math.floor(Math.random() * (90 - 1) + 1);

    if (arr.length === 0) {
      arr.push({
        left: col,
        top: row,
        id: info.value.blisterList[i].id,
        incomeNum: info.value.blisterList[i].incomeNum,
      });
    } else {
      const noOverlap = arr.every(
        (v) => Math.hypot(v.left - col, v.top - row) > 20
      ); //这里的主要目的就是来保证每次随机生成的点确定的图片位置不会有重叠
      if (noOverlap) {
        arr.push({
          left: col,
          top: row,
          id: info.value.blisterList[i].id,
          incomeNum: info.value.blisterList[i].incomeNum,
        });
      } else {
        i--;
      }
    }
  }
  randomList.value = arr;
};

// 获取挖矿首页数据
const getMiningData = async () => {
  const res = await MiningApi.getMiningIndex();
  info.value = res.data.content;
  produceNum();
};

// 获取挖矿首页数据
const getAwardRecordData = async () => {
  const res = await MiningApi.getAwardRecord({
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  });
  if (res.data.code === 200) {
    awardRecorTotal.value = res.data.content.total;
    awardRecorLists.push(...res.data.content.rows);
  }
};

// 点击查看更多奖励记录
const showMore = () => {
  pageNum.value++;
  getAwardRecordData();
};

// 点击领取所有气泡
const receiveInFull = async () => {
  const res = await MiningApi.getBlister();
  if (res.data.code === 200) {
    showSuccessToast("奖励领取成功!");
    setTimeout(() => {
      getMiningData();
    }, 1500);
  }
};

// // 点击左侧导航栏返回上一页
// const onClickLeft = () => {
//   history.back();
// };

// 点击复制
const copyLink = (e) => {
  e.stopPropagation();
  toClipboard(`https://uk.api.aptoken.xyz?address=${address.value}`);
  showSuccessToast(t("successfulReplication"));
};
</script>
<style scoped lang="scss">
.page {
  background-color: #000;
  padding: 0 15px 67px 15px;

  .mining-head {
    display: flex;
    justify-content: space-between;

    .head-title {
      font-size: 12px;
      font-family: PingFangSC-Regular;
      font-weight: Regular;
      color: #f0bc0f;
      padding: 5px 10px;
      border: 1px solid #f0bc0f;
      border-radius: 8px;
      margin-top: 15px;
    }
  }
  .blister-box {
    position: relative;
    height: 200px;
    margin-top: 20px;
    .blister-body {
      // position: absolute;
      // top: 0;
      // left: 0;
      width: 53px;
      height: 53px;
      background-image: url("@/static/blister.png");
      position: absolute;
      animation: myfirst 2s infinite;
      @keyframes myfirst {
        0% {
          transform: translate(0px, 0px);
        }
        50% {
          transform: translate(0px, -10px);
        }
        100% {
          transform: translate(0px, 0px);
        }
      }

      .blister-title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 12px;
        font-family: PingFangSC-Regular;
        font-weight: Regular;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #fff;
      }
    }
  }

  .mining-btn {
    display: flex;
    justify-content: space-between;

    .btn-box {
      font-size: 18px;
      font-family: PingFangSC-Regular;
      font-weight: Regular;
      padding: 8px 21px;
      color: #000;
      background-color: #f0bc0f;
      border-radius: 8px;
    }
  }

  .rules-title {
    text-align: center;
    font-size: 18px;
    font-family: PingFangSC-Medium;
    font-weight: Medium;
    color: #fff;
    margin: 47px 0 29px 0;
  }

  .node-mining {
    display: flex;
    flex-direction: column;
    padding: 20px 15px;
    background-color: #1b1b1b;
    border-radius: 5px;
    margin-bottom: 12px;

    .node-top {
      font-size: 15px;
      font-family: PingFangSC-Medium;
      font-weight: Medium;
      color: #f0bc0f;
      margin-bottom: 13px;
    }

    .node-bottom {
      font-size: 13px;
      font-family: PingFangSC-Regular;
      font-weight: Regular;
      color: #fff;
    }
  }

  .recommend-mining {
    display: flex;
    flex-direction: column;
    padding: 20px 15px;
    background-color: #1b1b1b;
    border-radius: 5px;

    .recommend-top {
      font-size: 15px;
      font-family: PingFangSC-Medium;
      font-weight: Medium;
      color: #f0bc0f;
      margin-bottom: 13px;
    }

    .recommend-center {
      font-size: 13px;
      font-family: PingFangSC-Regular;
      font-weight: Regular;
      color: #fff;
    }

    .recommend-bottom {
      font-size: 13px;
      font-family: PingFangSC-Regular;
      font-weight: Regular;
      color: #fff;
    }
  }

  .reward-log {
    color: #fff;
    background-color: #1b1b1b;
    border-radius: 5px;
    padding: 10px 14px 24px 14px;
    .reward-list {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;
    }
    .reward-more {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 25px 0 0 7px;

      .more-title {
        font-size: 15px;
        font-family: PingFangSC-Regular;
        font-weight: Regular;
        color: #eab947;
        margin-left: 7px;
      }
    }
  }
}

.invitation-box {
  position: relative;
  width: 80%;
  border: 2px solid #f0bc0f;
  margin: 0 auto;
  transform: translateY(100%);
  background-color: #000;
  border-radius: 20px;
  color: #fff;
  padding: 20px 18px 42px 18px;

  .cross {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 4px);
    height: 50%;
    z-index: -1;
    background-color: #000;
  }
  .vertical {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: calc(100% + 6px);
    z-index: -1;
    background-color: #000;
  }
  .direct-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    word-break: break-all;

    .body-tip {
      font-size: 18px;
      font-family: PingFangSC-Regular;
      font-weight: Regular;
      color: #fdfdfd;
    }

    .body-body {
      width: 100%;
      font-size: 18px;
      font-family: ArialMT;
      font-weight: Regular;
      color: #f0bc0f;
      margin: 37px 0;
    }

    .direct-foot {
      width: 100%;
      text-align: center;
      font-size: 15px;
      font-family: PingFangSC-Regular;
      font-weight: Regular;
      padding: 8px 0;
      color: #000000;
      border-radius: 8px;
      background-color: #f0bc0f;
    }
  }
}
</style>
